<doc>
  https://www.makeapie.com/editor.html?c=xoqSlmiSRZ
</doc>
<template>
  <div>
    <div id="bingzhuangtu" style="width: 500px;height:400px;float: left;"></div>
  </div>
</template>
<script>
  import echarts from 'echarts'
  export default {

    data() {
      return {
        charts: '',
      }
    },

    mounted() {
      this.init("bingzhuangtu")
    },

    methods: {
      init(id) {
        this.charts = echarts.init(document.getElementById(id))


        var img = '';

        var trafficWay = [{
          name: '火车',
          value: 20
        }, {
          name: '飞机',
          value: 10
        }, {
          name: '客车',
          value: 30
        }, {
          name: '轮渡',
          value: 40
        }];

        var data = [];
        var color = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
        for (var i = 0; i < trafficWay.length; i++) {
          data.push({
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                shadowBlur: 20,
                borderColor: color[i],
                shadowColor: color[i]
              }
            }
          }, {
            value: 2,
            name: '',
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0
              }
            }
          });
        }
        var seriesOption = [{
          name: '',
          type: 'pie',
          clockWise: false,
          radius: [105, 109],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'outside',
                color: '#ddd',
                formatter: function (params) {
                  var percent = 0;
                  var total = 0;
                  for (var i = 0; i < trafficWay.length; i++) {
                    total += trafficWay[i].value;
                  }
                  percent = ((params.value / total) * 100).toFixed(0);
                  if (params.name !== '') {
                    return '交通方式：' + params.name + '\n' + '\n' + '占百分比：' + percent + '%';
                  } else {
                    return '';
                  }
                },
              },
              labelLine: {
                length: 10,
                length2: 20,
                show: true,
                color: '#00ffff'
              }
            }
          },
          data: data
        }];
        let option = {
          backgroundColor: '#0A2E5D',
          color: color,
          title: {
            text: '交通方式',
            top: '48%',
            textAlign: "center",
            left: "49%",
            textStyle: {
              color: '#fff',
              fontSize: 22,
              fontWeight: '400'
            }
          },
          graphic: {
            elements: [{
              type: "image",
              z: 3,
              style: {
                image: img,
                width: 178,
                height: 178
              },
              left: 'center',
              top: 'center',
              position: [100, 100]
            }]
          },
          tooltip: {
            show: false
          },
          legend: {
            icon: "circle",
            orient: 'horizontal',
            // x: 'left',
            data: ['火车', '飞机', '客车', '轮渡'],
            right: 10,
            bottom: 10,
            align: 'right',
            textStyle: {
              color: "#fff"
            },
            itemGap: 10
          },
          toolbox: {
            show: false
          },
          series: seriesOption
        }


        // 使用刚指定的配置项和数据显示图表。
        this.charts.setOption(option);
      }
    },

  }
</script>
<style scoped>

</style>